<!--
 * @FilePath: conterBox.vue
 * @Author: 杜芬
 * @Date: 2023-07-31 16:07:47
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-07-31 16:44:59
 * Copyright: 2023 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 页面
-->
<template>
  <div :class="{ 'content-box': true, 'style-title': title !== '' }">
    <div v-if="title !== ''" class="content-title">{{ title }}</div>
    <img class="img1" src="../../assets/contentBox/bianxian.png" alt="" />
    <img class="img2" src="../../assets/contentBox/bianxian.png" alt="" />
    <img class="img3" src="../../assets/contentBox/bianxian.png" alt="" />
    <img class="img4" src="../../assets/contentBox/bianxian.png" alt="" />
    <slot style="height: calc(100% - 40px)"></slot>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      property: 'value',
    };
  },
};
</script>
<style lang="scss" scoped>
.content-box {
  width: 100%;
  position: relative;
  // height: 100%;
  border: 1px solid #014489;
  background: rgba(0, 22, 52, 0.6);
  color: #fff;
  &.style-title {
  }
  .content-title {
    color: #fff;
    text-align: center;
    padding: 10px 0;
    font-weight: bold;
  }
  img {
    width: 8px;
  }
  .img1 {
    position: absolute;
    transform: rotate(360deg);
    top: 0;
    left: 0;
  }
  .img2 {
    position: absolute;
    transform: rotate(90deg);
    top: 0;
    right: 0;
  }
  .img3 {
    position: absolute;
    transform: rotate(270deg);
    bottom: 0;
    left: 0;
  }
  .img4 {
    position: absolute;
    transform: rotate(180deg);
    bottom: 0;
    right: 0;
  }
  &.heighe-auto {
    height: auto;
  }
}
</style>
